<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <style>
        #app {
            width: 700px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
            padding: 20px;
            margin: 100px auto;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="form">
        <el-form :model="goodsForm" :rules="rules" ref="goodsForm" label-width="100px" class="demo-ruleForm">
            <h3 style="text-align: center">消费税计算</h3>
            <el-form-item label="商品名称" prop="name">
                <el-input v-model="goodsForm.name"></el-input>
            </el-form-item>

            <el-form-item label="数量" prop="count">
                <el-input v-model="goodsForm.count" type="number" min="1"></el-input>
            </el-form-item>


            <el-form-item label="商品类型" prop="type">
                <el-select v-model="goodsForm.type" placeholder="请选择商品类型">
                    <el-option label="书籍" value="1"></el-option>
                    <el-option label="食品" value="2"></el-option>
                    <el-option label="医疗用品" value="3"></el-option>
                    <el-option label="其他" value="4"></el-option>
                </el-select>
            </el-form-item>


            <el-form-item label="进口商品" prop="imported">
                <el-select v-model="goodsForm.imported" placeholder="请选择商品来源">
                    <el-option label="进口" value="true"></el-option>
                    <el-option label="非进口" value="false"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="价格" prop="price">
                <el-input v-model="goodsForm.price"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="addGoods('goodsForm')">添加商品</el-button>
                <el-button type="primary" @click="getResult()">计算</el-button>
                <el-button type="danger" @click="resetGoodsInfo()">重置商品数据</el-button>
                <el-button @click="resetForm('goodsForm')">重置表单</el-button>
            </el-form-item>
        </el-form>
    </div>
    <hr>
    <div id="table">
        <el-table
                :data="tableData"
                border
                style="width: 100%"
                ref="table">
            <el-table-column
                    prop="goodName"
                    label="商品名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="count"
                    label="数量"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="goodType"
                    label="商品类型"
                    :formatter="goodTypeFormat">
            </el-table-column>

            <el-table-column
                    prop="imported"
                    label="来源"
                    :formatter="importedFormater">
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="价格">
            </el-table-column>
            <el-table-column
                    prop="taxIncludedPrice"
                    label="税后价格">
            </el-table-column>
        </el-table>
        <p v-cloak>
            <span v-cloak>销售税： {{tax}}</span>
            <span v-cloak>总计： {{total}}</span>
        </p>
    </div>
</div>
<!--<input type="number">-->
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    $("#table").hide();
    new Vue({
        el: '#app',
        data() {
            return {
                tax: '',
                total: '',
                goodsForm: {
                    name: '',
                    count: '',
                    type: '',
                    imported: '',
                    price: ''
                },
                rules: {
                    name: [
                        {required: true, message: '请输入商品名称', trigger: 'blur'},
                        {min: 1, max: 5, message: '长度在 1 到 10 个字符', trigger: 'blur'}
                    ],
                    count: [
                        {required: true, message: '请输入数量', trigger: 'blur'}
                    ],
                    type: [
                        {required: true, message: '请选择商品类型', trigger: 'change'}
                    ],
                    imported: [
                        {required: true, message: '请选择是否为进口商品', trigger: 'change'}
                    ],
                    price: [
                        {required: true, message: '请输入价格', trigger: 'blur'}
                    ]
                },
                tableData: []
            };
        },
        methods: {
            addGoods(formName) {
                var vm = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        const data = {
                            name: vm.goodsForm.name,
                            count: vm.goodsForm.count,
                            type: vm.goodsForm.type,
                            imported: vm.goodsForm.imported,
                            price: vm.goodsForm.price,
                        };
                        $.ajax({
                            type: "POST",
                            url: '/goodsController/add',
                            contentType: "application/json",
                            dataType: "json",
                            data: JSON.stringify(data),
                            success: function (response) {
                                if (response.code == 200) {
                                    vm.$message({
                                        message: '添加成功！请继续添加',
                                        type: 'success',
                                        duration: 1000
                                    });
                                    vm.$refs[formName].resetFields();
                                }
                                if (response.code == 500) {
                                    vm.$message.error(response.message);
                                }
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {
                $("#table").hide();
                var vm = this;
                vm.$refs[formName].resetFields();
            },
            getResult() {
                var vm = this;
                $.ajax({
                    type: "GET",
                    url: '/goodsController/getTaxResult',
                    contentType: "application/json",
                    dataType: "json",
                    success: function (response) {
                        if (response.code == 200) {
                            $("#table").show();
                            vm.tableData = response.data.goodsList;
                            vm.tax = response.data.tax;
                            vm.total = response.data.total;
                        }
                        if (response.code == 500) {
                            vm.$message.error(response.message);
                        }
                    }
                });
            },
            resetGoodsInfo() {
                $("#table").hide();
                var vm = this;
                $.ajax({
                    type: "GET",
                    url: '/goodsController/removeAll',
                    contentType: "application/json",
                    dataType: "json",
                    success: function (response) {
                        if (response.code == 200) {
                            vm.$message({
                                message: '重置成功',
                                type: 'success',
                                duration: 1000
                            });
                        }
                        if (response.code == 500) {
                            vm.$message.error(response.message);
                        }
                    }
                });
            },
            goodTypeFormat(val) {
                if (val.goodType == 1) {
                    return "书籍";
                } else if (val.goodType == 2) {
                    return "食品";
                } else if (val.goodType == 3) {
                    return "医疗用品";
                } else {
                    return "其他";
                }
            },
            importedFormater(val) {
                if (val.imported == false) {
                    return "非进口";
                } else {
                    return "进口";
                }
            }
        }
    })
    ;
</script>
</html>
